<template>
    <div id="background">
        <el-container>
            <el-header id="shiCaoSearchHead">
                 <el-row type="flex" style="height:80%;display:flex;align-items: flex-end">
                    <el-col :xs="2" :sm="2" :md="2" :offset="1" class="imgCol">
                    <img v-bind:src="backIcon" class="backSize" @click="back"/>
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" :offset="6" class="imgCol"> 
                    <span class="titleSize">查询</span>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <el-container>
                    <el-header style="backgroundColor:#53cdf5;height:80px">
                        <el-row>
                            <el-col :xs="6" :sm="6" :md="6" :offset="1">
                                <button class="btnShiCaoMap" @click="goToPosition">杭州<i class="el-icon-caret-bottom"></i></button>
                            </el-col>
                            <el-col  :xs="5" :sm="5" :md="5" :offset="8" >
                                <span style="color:#fff">7月26号 </span>
                            </el-col>
                            <el-col  :xs="3" :sm="2" :md="2"  >
                                <span style="color:#fff"> 周六</span>
                            </el-col>
                        </el-row>
                        <el-row class="imgCol">
                           <el-autocomplete
                                style="width:90%;margin-top:5px"
                                v-model="state"
                                placeholder="搜索机构名称"
                                prefix-icon="el-icon-search"
                            >
                            </el-autocomplete>
                        </el-row>
                    </el-header>
                    <el-main>
                        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                    <!--    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"  >-->
                                <div v-for="jiGou in jiGous" v-bind:key="jiGou.id" >
                                    <!--
                                    <el-col  :xs="12" :sm="12" :md="12">
                                    <el-card style="margin-left: 10px; margin-right: 10px;margin-top:10px;height:115px" :body-style="{ padding: '0px'}" >
                                        <div  style="position:relative;text-align:center;">
                                             <el-image
                                                style="width:100%;height:85px"
                                                :src="jiGou.picture"
                                                fit="cover">
                                            </el-image>
                                            <div style="position:absolute;left:0;top:18%;right:0;bottom:0">
                                                <el-row>
                                                    <el-col>
                                                        <span class="words">{{jiGou.name}}</span>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-col class="noHuanHang">
                                                        <span class="words" style="font-size:8px">{{jiGou.trainTime}}</span>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-col :xs="2" :sm="2" :md="2" :offset="1">
                                                        <i class="el-icon-user-solid" style="font-size:8px;color:#707070"></i>
                                                    </el-col>
                                                    <el-col :xs="8" :sm="8" :md="8">
                                                        <span class="words" style="font-size:6px">{{jiGou.enrollNumber}}/{{jiGou.numberLimit}}</span>
                                                    </el-col>
                                                    <el-col :xs="8" :sm="8" :md="8" :offset="5" class="noHuanHang">
                                                        <span class="words" style="font-size:6px">{{jiGou.address}}</span>
                                                    </el-col>
                                                </el-row>
                                            </div>
                                        </div>
                                        <div>
                                            <div>
                                                <el-row type="flex">
                                                    <el-col :xs="14" :sm="14" :md="14" :offset="1">
                                                    <span class="moneyCss">¥{{jiGou.price}}</span>
                                                    </el-col>
                                                    <el-col  :xs="9" :sm="9" :md="9" >
                                                        <button v-show="jiGou.enroll" class="btnBaoMing" @click="goToBaoMing(jiGou.id,jiGou.price)">可报名</button>
                                                        <button v-show="!jiGou.enroll" class="btnNotBaoMing">已报满</button>
                                                    </el-col>
                                                </el-row>
                                            </div>
                                        </div>
                                    </el-card>
                                    </el-col>-->
                                    <div style="height:5px;backgroundColor:#f5f4f9"></div>
                                        <div style="padding:10px 10px 6px 10px;backgroundColor:#ffffff"  >
                                            <el-container>
                                                <el-aside width="90px">
                                                    <el-image
                                                        style="width: 80px; height: 80px"
                                                        :src="jiGou.picture"
                                                        fit="cover"
                                                    />
                                                </el-aside>
                                                <el-main>
                                                    <el-container>
                                                        <el-main>
                                                            <el-row>
                                                                <el-col>
                                                                    <span class="words noHuanHang">{{jiGou.name}}</span>
                                                                </el-col>
                                                            </el-row>
                                                            <el-row>
                                                                <el-col>
                                                                    <span class="moneyCss noHuanHang">¥{{jiGou.price}}</span>
                                                                </el-col>
                                                            </el-row>
                                                        </el-main>
                                                        <el-aside width="60px">
                                                            <el-row type="flex" class="end">
                                                                <el-col>
                                                                    <button v-show="jiGou.enroll" class="btnBaoMing" @click="goToBaoMing(jiGou.id,jiGou.price)">可报名</button>
                                                                    <button v-show="!jiGou.enroll" class="btnNotBaoMing">已报满</button>
                                                                </el-col>
                                                            </el-row>
                                                        </el-aside>
                                                    </el-container>
                                                    <el-row>
                                                        <el-col>
                                                            <span class="words noHuanHang" style="font-size:10px">{{jiGou.trainTime}}</span>
                                                        </el-col>
                                                    </el-row>
                                                    <el-row>
                                                        <el-col :xs="8" :sm="8" :md="8" >
                                                            <i class="el-icon-user-solid" style="font-size:10px;color:#707070"></i>
                                                            <span class="words" style="font-size:10px">{{jiGou.enrollNumber}}/{{jiGou.numberLimit}}</span>
                                                        </el-col>
                                                        <el-col :xs="12" :sm="12" :md="12" :offset="4">
                                                            <span class="words noHuanHang" style="font-size:10px">{{jiGou.address}}</span>
                                                        </el-col>
                                                    </el-row>
                                                    <!-- <el-row>
                                                        <el-col>
                                                            <span class="words end" style="font-size:6px">{{jiGou.address}}</span>
                                                        </el-col>
                                                    </el-row> -->
                                                </el-main>
                                            </el-container>
                                        </div>
                                </div>
                        <!--    </van-list>-->
                          <div style="height:5px;backgroundColor:#f5f4f9"></div>
                        </van-pull-refresh>
                    </el-main>
                </el-container>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import { Toast} from 'vant';
import backIcon from '../../assets/img/mine/geRenZhongXin/back.png'
export default {
    data(){
        return{
            //绑定当前培训id和课次id
            trainId:'',
            trainClassNo:'',
            //绑定当前位置信息
            location:'',
            //绑定当前时间
            time:'',
            backIcon:backIcon,
            //搜索框绑定内容
            restaurants: [],
            state: '',
            timeout:  null,
            //绑定显示的内容
            jiGous:[],
            baoMingAvaliable:true,
            // jiGous:[
            //     {
            //         id:1,
            //         picture:'',
            //         name:'职业培训中心',
            //         time:'2019-07-1 9:00-10:00',
            //         num1:25,
            //         num2:50,
            //         avaliable:true,
            //         area:'江干区',
            //         price:10.0,
            //         baoMing:true,

            //     },
            //     {
            //         id:2,
            //         picture:'',
            //         name:'职业培训中心',
            //         time:'2019-07-1 9:00-10:00',
            //         num1:25,
            //         num2:50,
            //         avaliable:true,
            //         area:'江干区',
            //         price:10.0,
            //         baoMing:false

            //     }
            // ],
            //绑定refresh
            isLoading:false,
            //绑定list
            loading:false,
            finished:false,
        }
    },
    mounted(){
        this.trainId=this.$route.query.trainId;
        this.trainClassNo=this.$route.query.trainClassNo;

        this.getJiGous();

        var normalHeight=sessionStorage.getItem('normalHeight');

        var bg = document.getElementById("background");
       // normalHeight=document.documentElement.clientHeight;
        console.log("height:"+normalHeight);
        bg.style.height = normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";

        var normalHeight=document.documentElement.clientHeight;
        var head=document.getElementById("shiCaoSearchHead");
        var headHeight=normalHeight/30 *4 ;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";
    },
    methods:{
        back(){
            console.log("back:");
            this.$router.go(-1);
        },
        goToBaoMing(id,price){
            this.$router.push({
                path:'/shiCao/baoMing',
                query:{
                    trainClassTimeId:id,
                    price:price
                }
            })
        },
        goToPosition(){
            this.$router.push({
                path:'/zhaoPin/position',
            })
        },
        onRefresh(){

        },
        onLoad(){

        },
        //根据课次id获取机构概览
        getJiGous(){
            var URL=this.IP.IP+'/train/trainGeneral';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params:{
                    city:'杭州',
                    trainId:this.trainId,
                    trainClassNo:this.trainClassNo,
                    time:'2019-09-01',
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.jiGous=response.data.data;
                    
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        }
    }
}
</script>
<style>
.end{
    display: flex;
    justify-content: flex-end;

}
.noHuanHang{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.el-input.is-active .el-input__inner, .el-input__inner:focus {
    border-color: #53cdf5;
}
.btnBaoMing{
    border-color: #53cdf5;
    border-style: none;
    background-color: #53cdf5;
    color:#fff;
    border-radius: 5px;
    font-size:14px;
    height: 30px;

}
.btnNotBaoMing{
    border-style: none;
    background-color: #cccccc;
    color: #fff;
    border-radius: 5px;
    font-size:14px;
    height: 30px;
}
.moneyCss{
  color: #f16161;
}
.btnShiCaoMap{
    background-color: rgb(255,255,255,0);
    border: none;
    color: #ffffff;
}
#shiCaoSearchHead{
    background-color: #53cdf5;
    color: #707070;
}
.imgCol{
    display:flex;
    align-items:center;
    justify-content:center
}
.words{
    color: #707070;
}
.el-main{
    padding: 0px;
  
}
.el-header{
    padding: 0px;
}
.backSize{
    height: 26px;
}
.titleSize{
    font-size:1.125em;
    color:#ffffff
}
@media screen and (max-width: 340px){
  .backSize{
      height: 22px;
  }
  .titleSize{
      font-size: 1em;
  }
}
</style>
